<template>
    <!-- element-ui级联组件 -->
     <!-- 将 treeData 中的数据动态绑定到组件的 options 属性上。组件将使用这些选项进行渲染，用户可以根据这些选项进行选择。 -->
    <el-cascader 
        size="mini"
        :value="values"
        :options="treeData"
        :props="props" 
        :separator="'-'"
        @change="changeValue"
    />
</template>

<script>
import { getDepartment } from '@/api/department'
import { transListToTreeData } from '@/utils'

export default {
    props: {
        values: {
            type: Number,
            default: null
        }  // 存储部门的 id 3 4 5
    },
    data() {
        return {
            treeData: [], // 赋值给级联的 options
            props: {
                label: 'name', // 要展示的字段
                value: 'id' // 要存储的字段
            }
        };
    },
    created() {
        this.getDepartment();
    },
    methods: {
        async getDepartment() {
            try {
                // 发起请求获取部门数据
                const departmentData = await getDepartment();
                // 将扁平数据转换为树形结构
                this.treeData = transListToTreeData(departmentData, 0);
            } catch (error) {
                // 处理请求过程中出现的错误
                console.error('获取部门数据时出错:', error);
                // 可以在这里添加更多的错误处理逻辑，如提示用户等
            }
        },
        // 接收一个参数 list，通常表示当前选择的项的列表。
        changeValue(list) {
            // 获取最后一个选中的部门 id
           if(list.length>0){
            //在方法中，输出选择项的数量，并通过 $emit 触发 input 事件，将新的选择项列表传递给父组件。
            this.$emit('input',list[list.length-1])//将最后一位的id取出来
           }else{
            this.$emit('input',null)//如果长度为0，说明值为空
           }
        }
    }
};
</script>